<template>
  <div class="all">
    <Back title="公告列表"/>
    <div v-for="message in msgList" :key="message.id" class="message">
      <h3>{{ message.title }}</h3>
      <a @click="next(message.id)" style="color: grey" v-html="message.content" ></a>
      <span>
        <img src="../../assets/icon/time.png"/>
        {{ message.updateTime }} UTC+8
      </span>
      <span style="width: 50px"></span>
      <span>
        <img src="../../assets/icon/eyes.png" />
        {{ message.visits }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import Back from "../../components/BackNavbar.vue";
import {getMessageAll} from "../../apis/api";
import {onMounted} from "vue";
import {ref} from "vue";
import {useRouter} from 'vue-router'; // 导入 useRouter
const router = useRouter(); // 获取 router 实例

// const next = (item, messageId) => {
//   router.push({ path: item.path, query: { messageId: messageId } });
// }
const next = (messageId) => {
  router.push({ path: '/message/'+messageId });
};

//获取通告全部信息
let msgList = ref<any[]>([]);
const messageAll = () =>
    getMessageAll().then(res => {
      msgList.value = res.data.data;
    })

// 在页面加载时调用方法
onMounted(() => {
  messageAll();
});
</script>

<style scoped>
.all{
  width: 480px;
  height: 850px;
}
h3 {
  margin: 17px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
a {
  //text-decoration: none;
  margin: 0px 7px 0px 7px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.message {
  margin-bottom: 20px; /* 举例：每个消息之间的间距 */
}

.message img {
  width: 20px; /* 举例：图标大小 */
  height: 20px;
}

.message span {
  margin-right: 50px; /* 举例：图标与文本之间的间距 */
}
</style>